<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
  <div class="home">
    <!-- 标题 -->
    <div class="ZTYC_title">状态预测</div>
    <!-- 内容 -->
    <div class="ZTYC_content">
      <!-- 下拉菜单 -->
      <div class="xiaLaCaiDan">
        <el-select v-model="selectedData" class="select-bg" placeholder="请选择设备" :popper-append-to-body="false">
          <el-option id="el-option" v-for="(item, index) in dataOptions" :key="index" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 折线图 -->
      <div class="ZTYC_zheXianTu_BIG">
        <div id="ZTYC_zheXianTu"></div>
      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "Home",
  data() {
    return {
      // el-select的选择的值,默认选择的数据
      selectedData: "T011开关#1气室压力",
      // 下拉菜单
      dataOptions: [
        {
          value: "data1",
          label: "T011开关#1气室压力"
        },
        {
          value: "data2",
          label: "数据1"
        },
        {
          value: "data3",
          label: "数据2"
        },
        {
          value: "data4",
          label: "数据3"
        },
        {
          value: "data5",
          label: "数据4"
        }
      ],

    }
  },
  components: {},
  mounted() {
    this.ZTYC_zheXianTu()
  },
  methods: {
    // 折线图
    ZTYC_zheXianTu() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('ZTYC_zheXianTu'));
      myChart.resize({
        width: 537,
        height: 280
      })
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2023.08', '2023.09', '2023.10', '2023.11', '22023.12', '2024.01', '2024.02',],
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          max: 0.7,
          axisLabel: {
            formatter: '{value} MP',
            color: '#fff'
          },
          axisLine: {
            show: true
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            lineStyle: {
              color: '#40486a'
            }
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 3,
              color: '#5572bc'
            },
            {
              gt: 3,
              lte: 6,
              color: '#ec6941'
            }
          ]
        },
        series: [
          {
            name: 'T011开关#1气室压力',
            type: 'line',
            smooth: false,
            // symbol: 'circle',
            symbolSize: 10,
            areaStyle: {},
            // prettier-ignore
            data: [0.6, 0.6, 0.66, 0.6, 0.5, 0.62, 0.5],
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },

              data: [
              ]
            }
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home {
  width: 608px;
  height: 288px;
  background: url("../assets/ZTYC_bg.png") no-repeat;

  // 标题
  .ZTYC_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: left;
    padding-left: 54px;
    font-size: 20px;
  }

  // 内容
  .ZTYC_content {
    width: 100%;
    height: 248px;
    padding-left: 13px;
    padding-top: 15px;
    color: #fff;
    // background-color: pink;

    // 下拉菜单
    .xiaLaCaiDan {
      position: relative;
      width: 215px;
      height: 26px;
      z-index: 1;
      // background-color: green;
      margin-left: 365px;
    }

    // 折线图
    .ZTYC_zheXianTu_BIG {
      width: 537px;
      height: 178px;
      // background-color: yellow;
      margin: 14px auto;

      #ZTYC_zheXianTu {
        width: 100%;
        height: 100%;
        margin-top: -40px;
      }
    }

  }

  // element的下拉菜单样式设置
  ::v-deep .el-select {
    width: 215px;
    height: 26px;
    background-color: #202f3e;

    .el-input__inner {
      height: 26px;
      background-color: #202f3e;
      border-radius: 0;
      color: #fff;
    }

    // 下拉箭头的设置
    .el-input__prefix,
    .el-input__suffix {
      top: 8px;
    }

  }


}
</style>
